<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2017/12/7
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="app">
  <el-row type="flex" class="row-info-bottom">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名">
        <el-select v-model="formInline.project" clearable placeholder="请选择">
          <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板类型">

        <el-select v-model="formInline.type" clearable placeholder="请选择">
          <el-option
              v-for="item in options2"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-col :span="2">
      <el-button type="success" class="btn-width-100" @click="addMsg(true)">增加</el-button>
    </el-col>
  </el-row>
  <el-table
      v-loading="loadingFlag"
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        width="50">
    </el-table-column>

    <el-table-column
        prop="project"
        label="项目名"
        :formatter="projectformat"
    >
    </el-table-column>
    <el-table-column
        prop="type"
        label="模板类型"
        :formatter="msgformat"
    >
    </el-table-column>
    <el-table-column
        prop="title"
        label="模板标题">
    </el-table-column>
    <el-table-column
        prop="content"
        label="模板内容">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作"
    >
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="updateMsgTemp(scope.row, false)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <%--审核信息弹出框--%>
  <el-dialog title="" :visible.sync="addMsgdialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form ref="form" :model="msgform" label-width="120px">
      <div v-if="keychose">
        <el-form-item label="新增模板类型">
          <el-select v-model="msgform.key" clearable placeholder="请选择">
            <el-option
                v-for="item in keyoptions"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="项目名">
        <el-select v-model="msgform.project" clearable placeholder="请选择">
          <el-option
              v-for="item in options"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板类型">

        <el-select v-model="msgform.type" clearable placeholder="请选择">
          <el-option
              v-for="item in options2"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="模板标题">
        <el-input v-model="msgform.title"></el-input>
      </el-form-item>
      <el-form-item label="类型内容">
        <el-input type="textarea" v-model="msgform.content"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancelclick" :loading="dialogBtnLoading">取消</el-button>
      <el-button type="primary" @click="addMsgclick" :loading="dialogBtnLoading">确定</el-button>
    </div>
  </el-dialog>

</div>
<script type="text/javascript">
  var vueobj = new Vue({
    el: '#app',
    mounted: function () {

      http.post("${basePath}/emp/msg/temp/findprojecttype", {})
        .then(function (res) {
          console.log(res.data)
          vueobj.options = res.data;
        })

      http.post("${basePath}/emp/msg/temp/findmsgtype", {})
        .then(function (res) {
          console.log(res.data)
          vueobj.options2 = res.data;
        })
      http.post("${basePath}/emp/msg/temp/findmsgkey", {})
        .then(function (res) {
          console.log("11"+res.data);
          vueobj.keyoptions = res.data;
        })
    },
    data: function () {
      return {
        formInline: {
          project: "",
          type: ""
        },
        options: [
          {
            value: '',
            label: ''
          }
        ],
        options2: [
          {
            value: '',
            label: ''
          }
        ],
        keyoptions: [
          {
            value: '',
            label: ''
          }
        ],
        keychose: false,
        projectdisable: false,
        msgform: {
          project: "",
          title: "",
          type: "",
          content: "",
          key: "",
        },
        loadingFlag: false,
        addMsgdialogVisible: false,
        tableData: [],
        dialogBtnLoading: false,
      }
    },
    methods: {
      onSubmit: function () {
        http.post("${basePath}/emp/msg/temp/findTemplate", {project: this.formInline.project, type: this.formInline.type})
          .then(function (res) {
            console.log(res.data)

            vueobj.tableData = res.data;
          })
      },
      //打开弹出框
      addMsg: function (data) {
        this.projectdisable = false;
        this.addMsgdialogVisible = true;
        this.keychose = data;
      },
      //添加消息模板
      addMsgclick: function () {
        var formData = JSON.stringify(this.msgform); // 这里才是你的表单数据

        http.post("${basePath}/emp/msg/temp/addtemplate", {formData: formData})
          .then(function (res) {
            this.addMsgdialogVisible = false;
            this.dialogBtnLoading = false;
            window.location.reload();
          })
      },
      //更新消息模板
      updateMsgTemp: function (row, data) {
        this.projectdisable = true;
        this.addMsgdialogVisible = true;
        this.keychose = data;
        vueobj.msgform = row;

      },
      //取消
      cancelclick: function () {
        this.projectdisable = false;
        this.addMsgdialogVisible = false;
        this.msgform = [];
      },


      projectformat: function (row, column, cellValue) {
        var arr = []
        arr = vueobj.options;

        for (var i = 0; i < arr.length; i++) {
          if (cellValue == arr[i].value) {
            return arr[i].label;
          }
        }
      },
      msgformat: function (row, column, cellValue) {
        var arr = []
        arr = vueobj.options2;

        for (var i = 0; i < arr.length; i++) {
          if (cellValue == arr[i].value) {
            return arr[i].label;
          }
        }
      }
    }
  })
</script>